还在用铅笔手绘素描草图？ArcGIS API for JavaScript可以帮你一步到位！

作为一名专注于web地图的制图师，很多时候会被问到，你会不会用原始的笔和纸来手绘草图呀！实际上，我用ArcGIS API forJavaScript创建的一款新应用——Sketch the city ，就能帮我自动画出3D效果的城市素描草图！效果如下：

在这篇文章中，我将向你展示如何使用这款应用程序来加载和可视化你自己的城市地图，以及如何构建这样一个应用程序。

画出3D效果的城市素描草图具体步骤

如果你没有你所在城市的3D模型，可以在Living Atlas中搜索看看是否有现成的城市Web场景。获取Web场景的id，并使用这个id作为url参数来加载这个应用程序。

例如，如果要查看id是9eea926653b84bc093760d4b08d84190的Web场景，请按这样的方式来加载该应用程序：

https：//ralucanicola.github.io/JSAPI_demos/sketch-the-city/index.html？id = 9eea926653b84bc093760d4b08d84190

如果你没有在Living Atlas中找到你所在城市的web scene，请尝试查看您所在的城市是否有一个开放数据门户网站，该门户网站上是否发布过一些建筑物的3D模型。

如果你有现成的建筑物3D模型的话，可以将其作为场景图层（scene layer）发布到ArcGIS Online。场景图层启动运行后，转到SceneViewer并创建包含场景图层的Web场景。这有一个关于如何使用SceneViewer创建Web场景的简短教程：

https://developers.arcgis.com/labs/arcgisonline/create-a-web-scene/

一点小提示：你可以在你的web场景中添加一些幻灯片（Slides），来标记你所在城市的兴趣点。教程：

https://doc.arcgis.com/en/arcgis-online/create-maps/capture-scene-slides.htm

这些幻灯片会显示成如下样式：

保存Web场景后，就可以使用Web场景的id作为url参数来加载这个应用程序了：

https://ralucanicola.github.io/JSAPI_demos/sketch-the-city/index.html?id=your_webscene_id

下图是我使用Sketch the city应用程序自动生成的城市素描草图，供大家欣赏~

金门大桥，旧金山

埃菲尔铁塔，巴黎

帝国大厦，纽约

柏林宫和亚历山大广场，柏林

怎么样，看着很酷炫吧？是不是也很好奇这个是怎么做出来的呀？接着往下看！

如何创建此应用程序？

下面是创建素描草图应用程序所需的3个关键步骤：

1、在SceneLayer上设置带有草图边缘的渲染器

SceneLayers是通过草图边缘和半透明白色面来绘制的。这是我在WebScene中应用于每个SceneLayer的渲染器：

2、设置背景图像

我在文档body上设置了一张带有旧纸张纹理的背景图像。通过使用具有透明背景的SceneView，这些建筑物看起来就像在旧旧的素描图。

把下面的CSS应用到body中，使该背景图像覆盖整个在屏幕上显示的区域：

3、在SceneView上设置透明背景

我要把SceneView中的背景设置为透明，这样就能把我刚刚设置的背景图片显示出来。为此，我将背景透明度设置为0。在初始化时，alphaCompositingEnabled也应该设置为true：

以上三步就是这个应用程序的主要步骤！

如果你比较好奇具体时如何实现的，请移步Github来查看这个应用程序代码。链接：

https://github.com/RalucaNicola/JSAPI_demos/tree/master/sketch-the-city

或直接使用Sketch the city 这个web应用，来玩一玩吧~链接：

https://ralucanicola.github.io/JSAPI_demos/sketch-the-city/

本文作者：Raluca Nicola

Esri负责ArcGIS API for JavaScript＃3D的产品工程师，也是一位专注于3D Web制图的制图师。

想要获取更多信息，请点击阅读原文。